<template>
  <div class="container">
    <div class="content">
      <n-loading-bar-provider>
        <n-tabs type="line" animated>
          <n-tab-pane name="Image" tab="Image">
            <Image />
          </n-tab-pane>
          <n-tab-pane name="Video" tab="Video">
            <Video />
          </n-tab-pane>
        </n-tabs>
      </n-loading-bar-provider>
    </div>
  </div>
</template>

<script setup>
import Image from '@/components/Image.vue'
import Video from '@/components/Video.vue'
</script>

<style scoped>
.container {
  padding: 30px 0;
}

.content {
  background: white;
  border-radius: 20px;
  margin: 0 auto;
  padding: 20px 40px;
  width: 65%;
}

.n-tab-pane {
  margin-top: 30px;
}
</style>
